<template>
  <s-layout
    title="品牌商品列表页"
    navbar="custom"
    :showLeftButton="true"
    navbarMode="normal"
    :bgStyle="template.style?.background"
    :navbarStyle="template.style?.navbar"
    onShareAppMessage
    :showFloatButton="true"
  >
    <view class="cake-list-page">
      <!-- 品牌头部 -->
      <view class="brand-header">
        <image
          class="brand-bg"
          src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/08/caca-bg.jpg"
          mode="aspectFill"
        />
        <view class="brand-overlay">
          <view class="brand-logo">
            <image
              class="logo-img"
              src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/03/08/caca-logo.png"
              mode="aspectFit"
            />
          </view>
          <view class="brand-name">caca</view>
          <view class="brand-desc"
            >您的卡券首充当前品牌到店消费（即线下直购）的权益</view
          >
        </view>
      </view>

      <!-- 切换标签 -->
      <view class="tab-section">
        <view class="tab-container">
          <view
            class="tab-item"
            :class="{ active: activeTab === 'goods' }"
            @click="switchTab('goods')"
          >
            <text class="tab-text">商品</text>
            <view class="tab-line" v-if="activeTab === 'goods'"></view>
          </view>
          <view
            class="tab-item"
            :class="{ active: activeTab === 'brand' }"
            @click="switchTab('brand')"
          >
            <text class="tab-text">品牌详情</text>
            <view class="tab-line" v-if="activeTab === 'brand'"></view>
          </view>
        </view>
      </view>

      <!-- 排序区域 -->
      <view class="sort-section">
        <view class="sort-container">
          <view
            class="sort-item"
            :class="{ active: sortType === 'price_asc' }"
            @click="changeSort('price_asc')"
          >
            <text class="sort-text">价格由高到低</text>
          </view>
          <view
            class="sort-item"
            :class="{ active: sortType === 'price_desc' }"
            @click="changeSort('price_desc')"
          >
            <text class="sort-text">价格由低到高</text>
          </view>
        </view>
      </view>

      <!-- 商品列表 -->
      <view class="goods-list" v-if="activeTab === 'goods'">
        <view
          class="goods-item"
          v-for="(item, index) in goodsList"
          :key="index"
        >
          <view class="goods-image-container">
            <image class="goods-image" :src="item.image" mode="aspectFill" />
          </view>
          <view class="goodsright">
            <view class="goods-info">
              <view class="goods-title">{{ item.title }}</view>
              <view class="goods-desc">{{ item.desc }}</view>
            </view>
            <view class="goods-action">
              <view class="goods-price">
                <text class="price-symbol">¥</text>
                <text class="price-value">{{ item.price }}</text>
              </view>
              <view class="buy-btn" @click.stop="buyNow(item)">立即购买</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 品牌详情 -->
      <view class="brand-detail" v-if="activeTab === 'brand'">
        <view class="detail-content">
          <text>品牌详情内容...</text>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script>
import sheep from "@/sheep";

export default {
  data() {
    return {
      activeTab: "goods",
      sortType: "price_asc",
      storeId: "", // 从上个页面传入的门店ID
      goodsList: [], // 改为空数组，从接口获取数据
      page: {
        current: 1,
        size: 10,
        total: 0,
        hasMore: true,
      },
      loading: false,
    };
  },
  computed: {
    template() {
      return sheep.$store("app").template.user;
    },
  },
  onLoad(options) {
    console.log(options);
    if (options.storeId) {
      this.storeId = options.storeId;
      console.log("接收到的门店ID：", this.storeId);
    }
    // 页面加载时获取商品列表
    this.getGoodsByStore();
  },
  // 触底加载更多
  onReachBottom() {
    if (this.page.hasMore && !this.loading) {
      this.getGoodsByStore(true);
    }
  },
  methods: {
    // 切换标签
    switchTab(tab) {
      this.activeTab = tab;
    },

    // 改变排序
    changeSort(type) {
      this.sortType = type;
      // 重新获取数据
      this.getGoodsByStore();
    },

    // 根据门店获取商品列表 - 调用getProductByShopId接口
    async getGoodsByStore(isLoadMore = false) {
      if (this.loading) return;

      this.loading = true;

      try {
        // 如果是加载更多，页码+1，否则重置为1
        if (isLoadMore) {
          this.page.current++;
        } else {
          this.page.current = 1;
          this.goodsList = [];
        }

        const params = {
          page: this.page.current, // 页码从1开始
          size: this.page.size,
        };

        // 如果有门店ID，添加到参数中
        if (this.storeId) {
          params.shopId = this.storeId;
        }

        console.log("调用getProductByShopId接口，参数:", params);

        // 调用getProductByShopId接口
        const res = await sheep.$api.cake.getProductByShopId(params);

        console.log("接口返回结果:", res);

        if (res.code === 200 && res.data) {
          const newList = res.data.content || []; // 数据在content字段中

          // 数据格式转换，适配前端显示
          const formattedList = newList.map((item) => ({
            id: item.id,
            title: item.name, // 商品名称
            desc: item.productCategoryName || "", // 分类名称作为描述
            price: item.price, // 价格
            image: item.pic, // 主图
            albumPics: item.albumPics, // 相册图片
            brandName: item.brandName, // 品牌名称
            unit: item.unit, // 单位
            weight: item.weight, // 重量
            goodsType: item.goodsType, // 商品类型
            cakeShopId: item.cakeShopId, // 蛋糕店ID
            detailHtml: item.detailMobileHtml, // 详情HTML
          }));

          if (isLoadMore) {
            // 加载更多时追加数据
            this.goodsList = [...this.goodsList, ...formattedList];
          } else {
            // 首次加载或刷新时替换数据
            this.goodsList = formattedList;
          }

          // 更新分页信息
          this.page.total = res.data.totalElements || 0;
          this.page.hasMore = !res.data.last; // last为true表示最后一页

          console.log("商品列表更新:", this.goodsList);
        } else {
          console.error("获取商品列表失败:", res.msg);
          sheep.$helper.toast(res.msg || "获取商品列表失败");
        }
      } catch (error) {
        console.error("调用getProductByShopId接口异常:", error);
        sheep.$helper.toast("网络异常，请稍后重试");

        // 如果是加载更多失败，回退页码
        if (isLoadMore && this.page.current > 1) {
          this.page.current--;
        }
      } finally {
        this.loading = false;
      }
    },

    // 跳转到商品详情
    goToDetail(item) {
      sheep.$router.go(`/pages/goods/detail?id=${item.id}`);
    },

    // 立即购买
    buyNow(item) {
      console.log("购买商品:", item);
      // 跳转到goods的index页面，传递商品ID
      sheep.$router.go(`/pages/goods/index?id=${item.id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.cake-list-page {
  background-color: #f5f5f5;
}

// 品牌头部
.brand-header {
  position: relative;
  height: 400rpx;
  overflow: hidden;
}

.brand-bg {
  width: 100%;
  height: 100%;
}

.brand-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.6)
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.brand-logo {
  width: 120rpx;
  height: 120rpx;
  background: rgba(139, 69, 19, 0.8);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.logo-img {
  width: 80rpx;
  height: 80rpx;
}

.brand-name {
  color: #fff;
  font-size: 72rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.brand-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 24rpx;
  text-align: center;
  line-height: 1.5;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5);
}

// 切换标签
.tab-section {
  background: #fff;
  padding: 0 30rpx;
}

.tab-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.tab-item {
  position: relative;
  padding: 30rpx 40rpx;
  margin-right: 60rpx;
}

.tab-text {
  font-size: 32rpx;
  color: #666;
  transition: color 0.3s;
}

.tab-item.active .tab-text {
  color: #333;
  font-weight: bold;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background: #ff6b35;
  border-radius: 2rpx;
}

// 排序区域
.sort-section {
  background: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.sort-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.sort-item {
  margin-right: 60rpx;
}

.sort-text {
  font-size: 28rpx;
  color: #999;
  transition: color 0.3s;
}

.sort-item.active .sort-text {
  color: #333;
  font-weight: bold;
}

// 商品列表样式修改
.goods-list {
  padding: 0;
  background: #f5f5f5;
}

.goods-item {
  background: #fff;
  margin: 0 0 20rpx 0;
  padding: 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
  z-index: 1;

  &:last-child {
    border-bottom: none;
  }
}

.goods-image-container {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-right: 24rpx;
  flex-shrink: 0;
  position: absolute;
  z-index: 2;
  background-color: #fff;
}

.goods-image {
  width: 100%;
  height: 100%;
}

.goods-info {
  flex: 1;
  padding-right: 20rpx;
  min-height: 140rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 12rpx;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.goods-desc {
  font-size: 24rpx;
  color: #999;
  line-height: 1.4;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.goods-price {
  display: flex;
  align-items: baseline;
  margin-bottom: 0;
}

.price-symbol {
  font-size: 24rpx;
  color: #ff9500;
  font-weight: 500;
}

.price-value {
  font-size: 32rpx;
  color: #ff9500;
  font-weight: 600;
}

.goods-action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.buy-btn {
  background: #8b4513;
  color: #fff;
  padding: 12rpx 24rpx;
  border-radius: 32rpx;
  font-size: 26rpx;
  font-weight: 500;
  text-align: center;
  min-width: 120rpx;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(139, 69, 19, 0.3);

  &:active {
    background: #7a3d10;
    transform: scale(0.98);
  }
}

// 品牌详情
.brand-detail {
  padding: 40rpx;
  background: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
}

.detail-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.goodsright {
  border: 2rpx solid #ccc;
  box-sizing: border-box;
  padding: 20rpx;
  padding-left: 120rpx;
  margin-left: 140rpx;
  border-radius: 20rpx;
}
</style>
